<template>
  <div v-if="hasContentPinia">
    <el-row :gutter="10" v-if="underwayTaskDataPinia.length">
      <el-col :span="24">
        <el-divider content-position="left">正在进行{{underwayTaskDataPinia.length}}</el-divider>
          <div v-for="(item, index) in underwayTaskDataPinia" :key="item.id" class="taskitem">
            <div class="left">
              <el-checkbox @change="_change(item,taskName.UNDERWAY)"></el-checkbox>
              <h2 class="underwayTask" contenteditable="true" :ref=" el => underwayContents[index] = el" @blur="_contentEdit(index,item,taskName.UNDERWAY)">{{item.title}}</h2>
            </div>
            <div>
              <div v-if="item.addTime" class="time">于{{item?.addTime}}添加&nbsp;&nbsp;</div>
              <el-popconfirm title="Not Done,Are you sure to delete this?" @confirm="_taskDel(item,taskName.UNDERWAY)">
                <template #reference>
                  <el-button type="danger">Delete</el-button>
                </template>
              </el-popconfirm>
            </div>
          </div>
      </el-col>
    </el-row>
    <div v-else-if="!underwayTaskDataPinia.length">
      <h1 style="text-align: center">现在开始添加任务</h1>
    </div>
    <el-row :gutter="10" v-if="completedTaskDataPinia.length">
      <el-col :span="24">
        <el-divider content-position="left">已经完成{{completedTaskDataPinia.length}}</el-divider>
        <div v-for="(item, index) in completedTaskDataPinia" :key="item.id" class="taskitem">
          <div class="left">
            <el-checkbox @change="_change(item,taskName.COMPLETED)"></el-checkbox>
            <h2 contenteditable="true" :ref=" el => completedContents[index] = el" @blur="_contentEdit(index,item,taskName.COMPLETED)">{{item.title}}</h2>
          </div>
          <div>
            <div v-if="item.completedTime" class="time">于{{item?.completedTime}}完成&nbsp;&nbsp;</div>
            <el-popconfirm title="Are you sure to delete this?" @confirm="_taskDel(item,taskName.COMPLETED)">
              <template #reference>
                <el-button type="danger">Delete</el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>
      </el-col>
    </el-row>
    <div v-else>
      <h1 style="text-align: center">当前还没有已经完成的任务</h1>
    </div>
  </div>
  <div v-else>
    <h1 style="text-align: center">啥都没有</h1>
  </div>
  <el-row :gutter="10">
      <div class="explanation" v-if="hasContentPinia">点击文本可编辑</div>
  </el-row>
</template>

<script lang="ts" setup>
  import { ref, reactive, computed } from 'vue';
  import type ITask from '../types/ITask';
  import { taskDel } from "../funtions/taskDel"
  import { change } from '../funtions/checkboxChange';
  import { useStore } from "../../../store"
  import { usePiniaTodoListStore } from '../../../store/todolist'
  import cacheToData from '../funtions/cacheToData';
  import { UNDERWAYTASKID, COMPLETEDTASKID } from '../constant/taskId';
  import { taskName } from '../enum/taskName';
  import LocalCache from "../../../utils/cache"

  const store = useStore()
  const piniaTodoListStore = usePiniaTodoListStore()

  const cacheData = () => {
    return {
      underwayTaskData: <ITask[]>cacheToData(UNDERWAYTASKID),
      completedTaskData: <ITask[]>cacheToData(COMPLETEDTASKID)
    }
  }

  //初始化数据 vuex
  const taskData = computed(() => store.state.todolist.taskData)
  const completedTaskData = computed(() => store.state.todolist.taskData.completedTaskData)
  const underwayTaskData = computed(() => store.state.todolist.taskData.underwayTaskData)
  const hasContent = computed(() => underwayTaskData.value.length + completedTaskData.value.length)

  //pinia
  const taskDataPinia = computed(() => piniaTodoListStore.taskData)
  const completedTaskDataPinia = computed(() => piniaTodoListStore.taskData.completedTaskData)
  const underwayTaskDataPinia = computed(() => piniaTodoListStore.taskData.underwayTaskData)
  const hasContentPinia = computed(() => completedTaskDataPinia.value.length + underwayTaskDataPinia.value.length)

  const underwayChecked = ref<ITask[]>([])
  const completedChecked = ref<ITask[]>([])
  const underwayContents = ref<any>([])
  const completedContents = ref<any>([])

  /**
   * 删除任务
   * @param task 删除的任务
   * @param taskType 任务类型
   */
  const _taskDel = (task: ITask, taskType: string) => {
    taskType == taskName.UNDERWAY ? taskDel(task, taskDataPinia.value,taskName.UNDERWAY) : taskDel(task, taskDataPinia.value,taskName.COMPLETED)
    //store.commit("todolist/generateTaskData", cacheData())
    piniaTodoListStore.generateTaskData(cacheData())
  }

  /**
   * 改变任务类型
   * @param task 要改变的任务
   * @param taskType 任务类型
   */
  const _change = (task: ITask, taskType: string) => {
    taskType == taskName.UNDERWAY ? change(task, taskDataPinia.value, taskName.UNDERWAY) : change(task, taskDataPinia.value, taskName.COMPLETED)
    //store.commit("todolist/generateTaskData", cacheData())
    piniaTodoListStore.generateTaskData(cacheData())
  }

  /**
   * 保存编辑完成后的任务
   * @param index 节点索引
   * @param task 任务
   * @param taskType 任务类型
   */
  const _contentEdit = (index: number, task: ITask, taskType: string) => {
    const editContent = taskType == taskName.UNDERWAY ? underwayContents.value[index] as HTMLElement : completedContents.value[index] as HTMLElement
    editContent && editContent.innerText == "" ? LocalCache.removeCache(task.id) : LocalCache.setCache(task.id, editContent.innerText)
    //store.commit("todolist/generateTaskData", cacheData())
    piniaTodoListStore.generateTaskData(cacheData())
  }

</script>

<style>
.left{
  display: flex;
  align-items: center;
}
h2{
  display: inline-block;
  margin-left: 5vw;
  border: none;
  outline: none;
}
.taskitem{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.time {
  display: inline-block;
}
.explanation {
  font-size: 12px;
  width: 100%;
  text-align: right;
  margin-right: 10px;
}
</style>
